<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>? + ? = ?</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./lib/prototype.js" type="text/javascript"></script>
  <script src="./lib/scriptaculous.js" type="text/javascript"></script>
  <script type="text/javascript" src="./yahoo/yahoodomevent/yahoo-dom-event.js"></script>
  <script type="text/javascript" src="./yahoo/history/history-beta-min.js"></script>
  <script type="text/javascript" language="javascript">
  // <![CDATA[
'a big blockquote br b center code div em form h1 h2 h3 h4 h5 h6 hr img iframe input i li ol option pre p script select small span strong style sub sup table tbody td textarea th tr ul u'.split(' ').each(function(e) {
  window['$' + e] = function() {
    if (arguments[0]) {
      if (arguments[0].nodeType) return Builder.node(e,$A(arguments));
      if (arguments[1]) return Builder.node(e,arguments[0],$A(arguments).slice(1));
      return Builder.node(e,arguments[0]);
    };
    return Builder.node(e);
  }
});


var cont_table = [];
var q_table = [];

// show :: Element -> IO ()
function show(el){
  //remove all children from <div id="main">.
  var e = $('main');
  while (e.firstChild) e.removeChild(e.firstChild);
  e.appendChild(el);
}

// action :: (unit -> Hash) -> (Hash -> IO ()) -> String
function action(func_q,thunk) {  
  var kurl = cont_table.push(thunk) - 1;  
  q_table[kurl] = func_q;
  return 'navi(' + kurl + ')';
}

// navi :: Number -> IO ()
function navi(kurl) {
 YAHOO.util.History.navigate('kurl',String(kurl));
}

// do_action :: Number -> IO ()
function do_action(kurl) {
  if (typeof q_table[kurl] === 'function')
    q_table[kurl] = q_table[kurl].call();
  var thunk = cont_table[kurl];
  thunk(q_table[kurl]);
}

// q0 :: unit -> Hash
function q0() {
  var a = {
    x: $('x').value
  };
  return $H(a); 
}

// q1 :: unit -> Hash
function q1() {
  var a = {
    y: $('y').value
  };
  return $H(a); 
}

// main :: Hash -> IO ()

function main(query) {
  show($div($h1('? + ? = ?'),
	    'please input number',$br(),
	    $form({action: 'javascript:' + action(q0, function(query) {
	      var x = query['x'];
	      show($div($h1(x + ' + ? = ?'),
			'please input number',$br(),
			$form({action: 'javascript:' + action(q1, function(query) {
			  var y = query['y'];
			  show($h1(x + ' + ' + y + ' = ' + (parseInt(x,10) + parseInt(y,10))))
			    })},
			      $input({id: 'y'}),$br(),
			      $input({type: 'submit'}))));
	    })},
		  $input({id:'x'}),$br(),
		  $input({type: 'submit'}))));
}

  // ]]>
  </script>
</head>
<body>
<script>
YAHOO.util.History.register('kurl', '0', function(state) {
  do_action(Number(state));
} );

YAHOO.util.History.onLoadEvent.subscribe(function() {
  cont_table = new Array();
  q_table = new Array();
  action(function() {return $H({})}, main);
  do_action(0);
} );

YAHOO.util.History.initialize();
</script>
<div id="main">Please enable the javascript.</div>
</body>
</html>
